<template>
    <view class="login-container">

        <!-- logo区域 -->
        <view class="logo-wrap" @click="goto('/')">
            <image class="logo" src="@/static/images/logo.png"/>
            <view class='txt'>三叉戟生鲜，新鲜亲民快捷</view>
        </view>

        <!-- 登录表单区域 -->
        <view class="login-wrap">
            <!-- 基础表单校验 -->
			<uni-forms ref="formRef" :rules="rules" :modelValue="formData">
				<!-- 用户名 -->
				<uni-forms-item name="username">
					<uni-easyinput prefixIcon="person" :styles="styles" :placeholderStyle="placeholderStyle" v-model="formData.username" :maxlength="30" placeholder="请输入用户名" />
				</uni-forms-item>
				
				<!-- 密码 -->
				<uni-forms-item name="password">
					<uni-easyinput type="password" prefixIcon="locked" :styles="styles" :placeholderStyle="placeholderStyle" v-model="formData.password" :maxlength="16" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="login-btn" @click="handlerLogin">登&nbsp;&nbsp;录</button>
			
			<!-- 底部 -->
			<view class="footer-wapper">
				<view @click="goto('/pages/message_login/index')">短信登录</view>
				<view @click="goto('/pages/register/index')" style="font-size: 36upx;color: #E83915;">还没有账户</view>
				<view @click="goto('/pagesUser/forgot_password/index')">找回密码</view>
			</view>
			
			<!-- 第三方登录 -->
			<!-- #ifndef H5 -->
			<view class="third-wapper">
				<view class="third-line">
					<view class="single-line">
						<view class="line"></view>
					</view>
					
					<!-- #ifdef APP-PLUS -->
					<view class="third-words">第三方登录</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<view class="third-words">微信手机号快捷登录</view>
					<!-- #endif -->
					
					<view class="single-line">
						<view class="line"></view>
					</view>
				</view>
				
				<view class="third-icons-wapper">
					<!-- #ifdef APP-PLUS -->
					<image src="/static/images/qq.png" class="third-ico" @click="thirdLogin('qq')"></image>
					<image src="/static/images/weibo.png" class="third-ico" @click="thirdLogin('sinaweibo')" style="margin-left: 80upx;"></image>
					<image src="/static/images/wx.png" class="third-ico" @click="thirdLogin('weixin')" style="margin-left: 80rpx;"></image>
					<!-- #endif -->
					
					<!-- MP-WEIXIN -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- <button type="primary" plain @click="wxLogin" class="third-btn-ico"></button> -->
					<!-- 手机号实时验证 -->
					<!-- 目前该接口针对非个人开发者，且完成了认证的小程序开放 -->
					<button type="primary" plain open-type="getPhoneNumber" class="third-btn-ico" @getphonenumber="onGetPhoneNumber"></button>
					<!-- #endif -->
				</view>
			</view>
			<!-- #endif -->
        </view>
    </view>
</template>


<script setup lang="ts">
import { reactive, ref } from "vue"
import { useCartStore, useUserStore } from '@/stores'
import { onShow } from '@dcloudio/uni-app'

// 用户存储
const userStore = useUserStore()

// 购物车存储
const cartStore = useCartStore()

// 获取页面参数
const query = defineProps({
	'redirect_url': {
		type: String,
        default: ''
	}
})

onShow(() => {
	// 如果用户已登录,将不允许访问登录页面
	if (userStore.profile?.token) {
		const routes = getCurrentPages()
		if (routes.length >= 2) {
			// 获取当前页面
			const currentPage = routes[routes.length - 1].route
			if (currentPage == 'pages/password_login/index') {
				// 跳转上一个页面
				uni.navigateBack()
			}
		} else {
			uni.switchTab({ url: '/pages/me/index' })
		}
	}
})

// 提交数据
const formData = reactive({
	username: '',
	password: ''
})

const formRef = ref()

// 验证规则
const rules = {
	username: {
		rules: [{
			required: true,
			errorMessage: '用户名不能为空'
		}]
	},
	password: {
		rules: [{
			required: true,
			errorMessage: '密码不能为空'
		}]
	}
}

// 输入框样式
const styles:any = ref(
	{
		// color: '#CD0011',
		// borderColor: '#CD0011'
	}
)
// 提示样式
const placeholderStyle = ref('font-size:14px')

// 处理登录
const handlerLogin = () => {
	formRef.value.validate().then(async () => {
		await userStore.login(formData)

		// 获取购物车商品
		await cartStore.getCartList()

		uni.showToast({
			title: '欢迎回来',
			duration: 1000
		})

		setTimeout(() => {
			const redirectUrl = decodeURIComponent(query.redirect_url)
			
			// 登录成功后，跳转url不为空并且不等于退出页，则跳转至跳转url，否则跳转至我的页面
			// 必须跳转至我的页面的redirectUrl
			const unRedirectUrls = [
				'/pagesUser/user_set/index',
				'/pages/password_login/index',
				'/pages/message_login/index',
				'/subpkg/forgot_password/index',
				'/pages/register/index',
			]

			if (redirectUrl == "undefined" || redirectUrl == "" || redirectUrl == 'null'|| unRedirectUrls.includes(redirectUrl)) {
				uni.switchTab({ url: '/pages/me/index' })
			} else {
				// 当redirectUrl是tabbar时需要使用switchTab跳转
				if (redirectUrl != '/pages/cart/index' && redirectUrl != '/pages/me/index') {
					uni.redirectTo({ url: redirectUrl})
				} else {
					uni.switchTab({ url: redirectUrl })
				}
			}
		}, 1000)
	}).catch(() => {
	})
}

// 第三方登录
const thirdLogin:any = () => {
}

// ---------------------- 跳转页面开始 ----------------------
const goto = (url:any) => {
	if (url == '/') {
		uni.switchTab({ url: '/pages/index/index' })
		return false
	} 
    uni.navigateTo({url})
}
// ---------------------- 跳转页面结束 ----------------------
</script>


<style scoped lang="scss">
.login-container {

    // logo区域
    .logo-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        height: 400rpx;
        text-align: center;
        background-color: #D1F7D1;
        .logo {
            width: 400rpx;
		    height: 120rpx;
        }
        .txt {
			margin-top: 20rpx;
            color: #008000;
        }
    }

    // 登录表单区域
    .login-wrap {
		padding: 30rpx;
		background-color: #fff;
		.login-btn {
			background-color: #008000;
			color: #fff;
			border-radius: 46rpx;
		}

		.footer-wapper {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
		}

		.third-wapper {
			margin-top: 60rpx;
			.third-line {
				display: flex;
				flex-direction: row;
				justify-content: center;
				.single-line {
					padding: 15rpx 20rpx;
					width: 25%;
					align-items: center;
					.line {
						height: 1px;
						background-color: #DBDBDA;
					}
				}
			}

			.third-icons-wapper {
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				.third-ico {
					width: 60rpx;
					height: 60rpx;
				}
				.third-btn-ico {
					background-image: url('@/static/images/wx.png');
					width: 60rpx;
					height: 60rpx;
					background-color: #FFFFFF;
					background-size: 60rpx 60rpx;
					background-repeat: no-repeat;
					border: none;
					padding: 0;
					border-radius: 50%;
				}
			}
		}
	}
}
</style>